<template>
    <el-card class="expand-card" shadow="never">
        <div class="expand-content">
            <!-- Order & Product Info -->
            <div class="expand-section">
                <div class="section-title">
                    <i class="el-icon-shopping-cart-2"></i>
                    Order & Product Info
                </div>
                <div class="section-content">
                    <el-scrollbar class="scroll-container">
                        <div class="scrollable-row">
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="label">Order No:</span>
                                    <span class="value">{{ row.shopify_order_number }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Amount:</span>
                                    <span class="value">${{ row.pay_amount }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Status:</span>
                                    <el-tag size="small" :type="row.pay_status === 1 ? 'success' : 'danger'">
                                        {{ payMap[row.pay_status] }}
                                    </el-tag>
                                </div>
                                <div class="info-item">
                                    <span class="label">Created:</span>
                                    <span class="value">{{ row.created_time }}</span>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>

            <!-- User Info -->
            <div class="expand-section">
                <div class="section-title">
                    <i class="el-icon-user"></i>
                    User Info
                </div>
                <div class="section-content">
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">Name:</span>
                            <span class="value">{{ row.user_name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">Email:</span>
                            <span class="value">{{ row.user_email }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'OrderDetailExpand',
    props: {
        row: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            payMap: {
                0: 'Unpaid',
                1: 'Paid'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.expand-card {
    margin: 0 10px;
    background-color: #fafafa;
    border: none;
    
    .expand-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .expand-section {
        background: white;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

        .section-title {
            font-weight: bold;
            margin-bottom: 16px;
            color: #303133;
            display: flex;
            align-items: center;
            gap: 8px;

            i {
                color: #409EFF;
            }
        }
    }

    .info-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .info-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .label {
            color: #909399;
            min-width: 80px;
        }

        .value {
            color: #303133;
        }
    }
}
</style>
